<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-tickets">
                    </i>
                    菜单管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container"  v-loading="listLoading">
            <el-row slot="body" style="margin-bottom:20px" :gutter="24">
                <el-col :span="6" :xs="24" :sm="24" :md="6" :lg="6" style="margin-bottom: 20px;">
                    <el-tree
                       class="filter-tree"
                        show-checkbox
                        :data="treedata"
                        :props="TreetProps"
                        default-expand-all 
                        
                        :render-content="renderContent"
                        @node-click="handleNodeClick"
                    ></el-tree>
                </el-col>
                <el-col :span="18" :xs="24" :sm="24" :md="18" :lg="18">
                    <el-card class="box-card">
                        <template>
                            <div class="btn">
                                <el-button   type="success" icon="el-icon-circle-plus-outline" @click="handleAddShow" size="mini" round>新增</el-button>      
                                <el-button type="danger" icon="el-icon-delete" @click="handleDeleteList" size="mini" round>删除</el-button>
                            </div>
                            <div>
                                <el-form :model="menuData" style="width:60%" :rules="rules" ref="menuData">

                                    <el-form-item   label="上级菜单" :label-width="labelwidth">  
                                        <select-tree v-model="menuData.parentid" :options="treedata" :props="TreetProps" clearable
                                    placeholder="请选择父级" ></select-tree>
                                    </el-form-item> 

                                    <el-form-item label="菜单名称" :label-width="labelwidth" prop="menuname">
                                        <el-input v-model="menuData.menuname">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item label="菜单URL" :label-width="labelwidth" prop="menuurl">
                                        <el-input v-model="menuData.menuurl">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item label="菜单图标" :label-width="labelwidth" prop="menuicon">
                                        <el-input v-model="menuData.menuicon">
                                        </el-input>
                                    </el-form-item>

                                    <el-form-item label="菜单排序" :label-width="labelwidth" prop="menusort">                  
                                        <el-input-number v-model="menuData.menusort"  :min="1" :max="10" label="描述文字"></el-input-number>
                                    </el-form-item>
                                                  
                                    <el-form-item label="菜单是否显示" :label-width="labelwidth" prop="menustate">
                                        <el-switch   active-value="0"  inactive-value="1" v-model="menuData.menustate"   active-color="#13ce66" inactive-color="#F0F0F0">
                                        </el-switch>                   
                                    </el-form-item>
                                    
                                </el-form>
                                 <div slot="footer" class="dialog-footer">                            
                                    <el-button type="primary" @click="OnSubmit('menuData')" v-text="menuData.istype=='add'?'新增':'修改'" ></el-button>
                                    <el-button @click="resetForm('menuData')">重置</el-button>
                                 </div>
                            </div>
                        </template>
                    </el-card>
                </el-col>
            </el-row>
        </div>

    </div>
</template>

<script>
import SelectTree from '../../common/selectTree.vue';
import merge from 'element-ui/src/utils/merge';
export default {
    
    data(){
        return{
            treedata:[],//树
            TreetProps: {
                children: 'children',
                label: 'menuname',
                value:'menuid'
            },
            options:[],
            listLoading:false,
            labelwidth:'120px',
            menuData:{
              parentid:null,
              menusort:1,
              menustate:'0',
              menuicon:'',
              menuname:'',
              menuurl:'',
              istype:'add',
            },
            rules:{
                menuname:[
                    {required:true,message:'请输入菜单名称',trigger:'change'}
                ],
                menuicon:[
                    {required:true,message:'请输入菜单图标',trigger:'change'}
                ],
                menusort:[
                    {required:true,message:'请选择排序',trigger:'change'}
                ],
                menuurl:[
                    {required:true,message:'请输入URL',trigger:'change'}
                ]
            }
        }
    },
    mounted(){

        this.getTreeData();
    },
    methods:{

        //重置
        resetForm(){

        },
        //提交数据
        OnSubmit(menuData){
            var _this = this;                                
            _this.$refs[menuData].validate((valid)=>{             
                if(valid){               
                // 开启动画
                    _this.listLoading = true;
                    if(_this.menuData.istype=='add'){
                        _this.$api.MenuAdd(_this.menuData).then((res)=>{
                            if(res.result=='ok'){
                                _this.$message({message:res.msg,type:'success'});
                            }else{
                                _this.$message({message:res.msg,type:'error'});
                            }
                            _this.listLoading = false;
                            _this.getTreeData();
                            _this.handleAddShow();
                        }).catch((err)=>{
                                _this.$message({message:'失败了',type:'error'});
                        });
                    }else{                       
                        _this.$api.MenuEdit(_this.menuData).then((res)=>{
                            if(res.result=='ok'){
                                _this.$message({message:res.msg,type:'success'});
                            }else{
                                _this.$message({message:res.msg,type:'error'});
                            }
                            _this.listLoading = false;
                            _this.getTreeData();
                            _this.handleAddShow();
                        }).catch((err)=>{
                            _this.$message({message:'失败了',type:'error'});
                        });
                            
                    }
                }
            });
        },
        handleNodeClick(data){
            this.istype ='edit';
            this.menuData =  merge({}, data);           
        },
         //新增
        handleAddShow(){
         
            this.menuData = {
                parentid:null,
                menusort:1,
                menustate:'0',
                menuicon:'',
                menuname:'',
                menuurl:'',
                istype:'add',
            };
             
        },
        //批量删除 
        handleDeleteList(){

        },
        // 获取树的数据
        getTreeData(){

            var _this = this;
            _this.$api.Menutree().then((res)=>{ 

                if(res.result =='ok'){
                    _this.treedata =res.data;
                }    
            }).catch((err)=>{ 
                _this.$message({ message:'数据获取失败', type:'error'});
            });
        },
         renderContent(h, {node, data, store}) {
            return (
            <span>
                <span>
                <span>{node.label}</span>
                </span>
            </span>);
        }
    },
    components:{
        SelectTree
    }

}
</script>

<style scoped>
 
    .btn{
        margin-bottom: 1rem;
        
    }
 
    .el-tree{
        border: 1px solid #d1dbe5
    }
 
 
</style>
 